<!-- 系统配置 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>- FooTable</title>
  <meta name="keywords" content="">
  <meta name="description" content="">

  <link rel="shortcut icon" href="favicon.ico">
  <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
  <link href="../css/plugins/footable/footable.core.css" rel="stylesheet">
  <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
  <link href="../css/animate.css" rel="stylesheet">
  <link href="../css/style.css?v=4.1.0" rel="stylesheet">
  <link href="../css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  
  <!-- 全局js -->  
  <script src="../js/jquery.min.js?v=2.1.4"></script>
  <script src="../js/bootstrap.min.js?v=3.3.6"></script>
  <script src="../js/plugins/footable/footable.all.min.js"></script>
  <script src="../js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
  <script src="../js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
  <!-- 第三方插件 -->
  <link rel="stylesheet" href="../js/plugins/pace/pace-theme-barber-shop.css">
  <script src="../js/plugins/pace/pace.min.js"></script>
  <!-- iCheck -->
  <script src="../js/plugins/iCheck/icheck.min.js"></script>

  <!-- 自定义css、js -->
  <link rel="stylesheet" href="../css/labMgt/self.css">
  <link rel="stylesheet" href="../css/labMgt/modal.css">
</head>
<body class="gray-bg">
  <div class="wrapper wrapper-content animated fadeInRight">
    <div class="wrapper-btn-inline">
      <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editForm">编 辑</button>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div id="accordion1" class="ibox float-e-margins">
          <div id="table1" class="ibox-content collapse in" aria-expanded="true">
            <table id="sys-table" class="footable table table-stripped toggle-arrow-tiny">
              <thead>
                <tr>
                  <th data-formatter="clickChoose"><input type="checkbox"></th>
                  <th data-field="field1">系统名称</th>
                  <th data-field="field2">客户名称</th>
                  <th data-field="field3">首页</th>
                  <th data-field="field3">页面风格</th>
                  <th data-field="field3">说明</th>
                  <!-- <th data-formatter="clickOperate">操作</th> -->
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
        </div>        
      </div>
    </div>   
  </div>

  <!-- form 表单弹框 新增addForm -->
  <div class="modal fade" id="editForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h5 class="modal-title" id="myModalLabel">编辑系统配置</h5>
        </div>
        <div class="modal-body">
          <form>
            <table class="form-table">
              <tbody>
                <tr>
                  <td class="title">系统名称：</td>
                  <td><input name="username" type="text"><b>*</b></td>
                </tr>
                <tr>
                  <td class="title">上级系统：</td>
                  <td>
                  	<select id="">
                  	  <option>请选择</option>
                  	  <option value="1">是</option>
                  	  <option value="0">否</option>
                  	</select>
                  	<b>*</b>
                	</td>
                </tr>
                <tr>
                  <td class="title">首页：</td>
                  <td>
                  	<select id="">
                  	  <option>请选择</option>
                  	  <option value="1">是</option>
                  	  <option value="0">否</option>
                  	</select>
                  </td>
                </tr>
                <tr>
                  <td class="title">登录页：</td>
                  <td>
                  	<select id="">
                  	  <option>请选择</option>
                  	  <option value="1">是</option>
                  	  <option value="0">否</option>
                  	</select>
                  </td>
                </tr>
                <tr>
                  <td class="title">页脚文本：</td>
                  <td><input name="footText" type="text"></td>
                </tr>
                <tr>
                  <td class="title">客户名称：</td>
                  <td><input name="customerName" type="text"></td>
                </tr>
                <tr>
                  <td class="title">页面风格：</td>
                  <td>
                  	<select id="">
                  	  <option>请选择</option>
                  	  <option value="1">是</option>
                  	  <option value="0">否</option>
                  	</select>
                  </td>
                </tr>
                <tr>
                  <td class="title">说明：</td>
                  <td><textarea name="note" type="text"></textarea></td>
                </tr>
              </tbody>
            </table>
          </form>          
        </div>
	      <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
       		<button type="button" class="btn btn-primary">确定</button>
	      </div>
      </div>
    </div>
    
  </div>

  <script>
  	var data = [{
  	  field1: '111',
  	  field2: '222',
  	  field3: '333',
  	}, {
  	  field1: '111',
  	  field2: '222',
  	  field3: '333',
  	}, {
  	  field1: '111',
  	  field2: '222',
  	  field3: '333',
  	},{
  	  field1: '111',
  	  field2: '222',
  	  field3: '333',
  	},{
  	  field1: '111',
  	  field2: '222',
  	  field3: '333',
  	},{
  	  field1: '111',
  	  field2: '222',
  	  field3: '333',
  	},];

    function clickChoose(id) {
      // 传值给click事件
      return "<input type='checkbox' />"
    }

    function clickOperate() {
      // 传值给click事件
      return "<a class='qn-check' data-toggle='modal' data-target='#editForm'>编辑</a>";
    }

  	function initTable() {
  	  var $table = $('#sys-table');
  	  $table.bootstrapTable({
  	    data: data,
  	    pagination: true,
  	    pageSize: 10
  	  });
  	}

  	$(function () {
  	  initTable();
  	});
  </script>
</body>
</html>
